<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/3
  Time: 23:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速注册</title>
</head>
<body ontouchstart=""  class="w100">
<div class="detailTop pf w100 of">
    <div class="w100 of tc cf f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png" style="margin-top: 4px;height: 40px;width: 40px;"/></span>
		快速注册
    </div>
</div>

<div class="container db h100 h100 of pr starImgBack">
 	<section class="w100" style="margin-top:23%;">
		<img src="mb/images/starImg.png" class="db jz hauto" style="width:84%;margin-top:11%;">
	</section>
	
		 <section class="loginBlock w100 db" style="margin-top: 7%;">
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-tel.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				<input type="tel" name="tel" value="" placeholder="请输入手机号" required="required" id="registTel" class="w100"/>
	 			</div>
	 		</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-img.png" class="db hauto">
	 			<div class="mgl10" style="width: 65%;">
	 				<input type="text" name="imgcode" id="imgVerificationCode" placeholder="请输入图片验证码" class="w100"/>
	 			</div>
	 			<img src="Patchca" class="mgl3 patchcaImg" id="patchcaImg"  style="width:31%;height:38px;">
	 		</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-yzm.png" class="db hauto">
	 			<div class="mgl10" style="width:59.1%;">
	 				  <input type="text" name="pwd" value="" placeholder="请输入验证码" required="required" id="verificationCode" class="w100"/>
	 			</div>
	 			 <button id="verificationCodeGet" class="f15 cf tc br2 mgl3 verificationCodeGet " onclick="settime($('#imgVerificationCode'),$('#registTel'))" style="margin-top:0;">获取验证码 </button>
	 		</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-pwd.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				 <input type="password" name="pwd" value="" placeholder="请输入您的密码" required="required" id="password" class="w100"/>
	 			</div>
	 		</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-pwd.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 				 <input type="password" name="pwd" value="" placeholder="请确认您的密码" required="required" id="password2" class="w100"/>
	 			</div>
	 		</div>
	 		<div class="df cf jz mgt10 of">
	 			<img src="mb/images/login-id.png" class="db hauto">
	 			<div class="mgl10 flexBox" style="flex-grow:2;">
	 			 		<input type="text" name="" id="introduceId" placeholder="推荐人ID（可选填）" class="w100"/>
	 			</div>
	 		</div>

            <div class="jz">
                <button type="button" id="regBub" class="f17 cf tc w100 btnOrange br2" style="margin-top: 8%;">快速注册</button>
            </div>
    </section>
   
</div>
<script>
    //倒计时
    var countdown = 60;
    function resetCode() {
        var btn = $('#verificationCodeGet');
        if (countdown == 0) {
            btn.removeAttr("disabled");
            btn.text("重新获取验证码");
            countdown = 60;
            return;

        } else {
            btn.attr("disabled", "disabled");
            btn.text("请在" + countdown + "s内填写");
            countdown--;
        }
        setTimeout(function () {
            resetCode(btn);
        }, 1000);
    }

    //发送验证码
    function smsSend(tel, icode) {
        var phone = $.trim(tel);
        var imgcode = $.trim(icode);
        $.ajax({
            url: "LoginServlet",
            data: JSON.stringify({m: 10, mobile: phone, imgcode: imgcode}),
            type: 'post',
            dataType: 'json',
            beforeSend: function () {
                showProgressDg();
            },
            success: function (data) {
                if (data.state == 1) {
                    showToast('验证码发送成功,请注意查收!');
                    resetCode(); //倒计时
                } else {
                    showToast(data.info);
                }
            },
            error: function () {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }

    //验证手机号码
    function checkPhone(tel, icode) {
        var pattern = /^1[0-9]{10}$/;
        var phone = $.trim(tel);
        var imgcode = $.trim(icode);
        if (phone == '') {
            showToast("请输入手机号码!");
            return false;
        }
        if (!pattern.test(phone)) {
            showToast("请输入正确的手机号码!");
            return false;
        }
        if (imgcode == '') {
            showToast("请输入图形验证码!");
            return false;
        }
        return true;

    }
    /*获取验证码*/
    function settime(icode, tel) {
        var phone = tel.val();
        var imgcode = icode.val();
        if (checkPhone(phone, imgcode)) {
            smsSend(phone, imgcode);
        } else {
            tel.focus();
        }
    }

    $(function () {
        $('#regBub').click(function () {
            var tel = $.trim($('#registTel').val());
            var password = $.trim($('#password').val());
            var password2 = $.trim($('#password2').val());
            var verificationCode = $.trim($('#verificationCode').val());
            var introduceId = $.trim($('#introduceId').val());

            if (tel == "") {
                showToast("你还未填写手机号!");
                return false;
            }
            if (verificationCode == "") {
                showToast("你还未填写验证码!");
                return false;
            }
            if (password == "" || password2 == "") {
                showToast("请输入密码!");
                return false;
            }
            if (password != password2) {
                showToast("两次密码不一致!");
                return false;
            }

            $.ajax({
                url: "LoginServlet",
                data: JSON.stringify({m: 11, mobile: tel, code: verificationCode}),
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    showProgressDg();
                },
                success: function (data) {
                    if (data.state == 1) {
                        // 验证验证码成功 接着注册
                        register(tel, verificationCode, password, introduceId);
                    } else {
                        showToast(data.info);
                        closeProgressDg();
                    }
                },
                error: function (data) {
                    console.log("error");
                    console.log(data);
                    showToast(data.info);
                    closeProgressDg();
                },
                complete: function () {

                }
            });
        })

    });

    function register(mobile, code, password, introduceId) {
        $.ajax({
            url: "LoginServlet",
            data: JSON.stringify({m: 12, mobile: mobile, code: code, password: $.md5(password), introduceId: introduceId,codepassword:password}),
            type: 'post',
            dataType: 'json',
            beforeSend: function () {

            },
            success: function (data) {
                console.log(data);
                if (data.state == 1) {
                    // 注册成功
                    showToast("注册成功，请登录!");
                    window.location.href = 'mb/jsp/login.jsp';
                } else {
                    showToast(data.info);
                }
            },
            error: function (data) {
                showToast(data.info);
            },
            complete: function () {
                closeProgressDg();
            }
        });
    }

</script>

</body>
</html>
